<template>
	<el-row>
	<!--  搜索操作区 -->
    <el-row class="pb10  little-header">
          <el-col :md='23' :lg='17'  >
                    <el-col  :xs='8' :sm='5' :md='5'  :lg='4'>
                      		<el-select v-model='search.pro_type' placeholder="请选择">
              							    <el-option
              							      v-for="item in pro_type"
              							      :key="item.value"
              							      :label="item.label"
              							      :value="item.value">
              							    </el-option>
              						</el-select>
                    </el-col>
        						<!-- <el-select  v-model='search.contract' placeholder="请选择" class='w140'>
        							    <el-option
        							      v-for="item in contract"
        							      :key="item.value"
        							      :label="item.label"
        							      :value="item.value">
        							    </el-option>
        						</el-select> -->
        						<!-- <el-select  v-model='search.pro_state' placeholder="请选择" class='w140'>
        							    <el-option
        							      v-for="item in pro_state"
        							      :key="item.value"
        							      :label="item.label"
        							      :value="item.value">
        							    </el-option>
        						</el-select> -->
                    <el-col  :xs='8' :sm='6'  :md='6'  :lg='5'  class='ml10 mr8'>
                          <el-input  placeholder='请输入产品名称/经办人' v-model.trim='search.name'  @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
                    </el-col>
                    <el-col  :xs='2' :sm='2' :md='2'  :lg='2'>
                          <el-button icon="el-icon-search" type='primary' @click='pageInit(1)'>搜索</el-button>
                    </el-col>
                    
          </el-col>
          <el-col :md='23' :lg='{span:5,offset:1}'>  
                <div align="right" class=' mr20 '>
                        <router-link to='/product/addNew'  v-if='permit.add'><el-button type="primary" icon="el-icon-plus" size="small" round  >新增</el-button></router-link>
                        <el-button  v-if='permit.export'  icon="el-icon-upload2"  size="small" round  class='export-icon'   @click="ExportFile_com(3)">导出</el-button>
                </div>
          </el-col>
    </el-row>
    <el-row class='pb10 text-left' >
          <el-button  v-if='permit.copy' type="primary"  size="small" round plain @click='copy()'>复制</el-button>
    </el-row>
    <!-- table -->
    <el-table border  :data="tableList" style="width: 100%"   :cell-class-name='hover'  @cell-click='checkUser'  row-key="code"  ref="multipleTable" @select="handleSelectionChange"  header-row-class-name='copyselect'>
          <!-- 单选复制 -->
          <el-table-column  type="selection"  width="40"  :reserve-selection='true'  > </el-table-column>
          <el-table-column prop="name"               label="产品名称"       align="center"    v-if='tableName.name==true' ></el-table-column>
          <el-table-column prop="size"               label="规模（万元）"     align="center"    v-if='tableName.guimo==true'></el-table-column>
          <el-table-column prop="prjName"            label="项目名称"       align="center"    v-if='tableName.pro_name==true'></el-table-column>
          <el-table-column prop="type"               label="产品类型"       align="center"    v-if='tableName.type==true'>
                <template  slot-scope='list'>
                      {{list.row.type | pro_type}}
                </template>
          </el-table-column>
          <el-table-column prop="status"             label="产品状态"       align="center"    v-if='tableName.state==true'>
                <template slot-scope="scope">
                      <!-- 未通过 -->
                      <span  class='color-red'      v-if='scope.row.status == 3  || scope.row.status == 6 '>{{scope.row.status | product_status}}</span>
                      <!-- 已通过 -->
                      <span  class='color-success'  v-else-if='scope.row.status == 4  || scope.row.status == 7 '>{{scope.row.status | product_status}}</span>
                      <!-- 审批中 -->
                      <span  class='color-999'      v-else-if='scope.row.status == 0  ||  scope.row.status == 2  || scope.row.status == 5 '>{{scope.row.status | product_status}}</span>
                      <!-- 未提审 -->
                      <span  v-else>{{scope.row.status | product_status}}</span> <br>
                      <span  v-if='scope.row.assigneeName'  class='ft14'>(当前审批指派->{{scope.row.assigneeName}})</span>
                </template>
          </el-table-column>
          <el-table-column prop="modifyTime"      label="创建时间"     align="center"  v-if='tableName.updateTime==true'>
                <template slot-scope="scope">
                      {{scope.row.createTime | formatDate}}
                </template>
          </el-table-column>
          <el-table-column prop="modifyTime"      label="更新时间"     align="center"  v-if='tableName.updateTime==true'>
                <template slot-scope="scope">
                      {{scope.row.modifyTime | formatDate}}
                </template>
          </el-table-column>
          <el-table-column prop="createUserName"     label="经办人"         align="center"    v-if='tableName.person==true'></el-table-column>
          <el-table-column prop="    "               label="审批历史"       align="center"    v-if='tableName.shenpi==true  &&  permit.history'  >
                  <template v-slot="list">
                      <!-- 审批状态为  除了未发起审批之外 都有查看审批历史的权限 -->
                      <router-link  :to='{path:"/product/ExaHistory_pro",query:{code:list.row.code,status:list.row.status,from:"product",prjCode:list.row.prjCode}}'  v-if='list.row.status!=1 &&  list.row.status<8'><el-button  type="primary" size="mini" round  plain>查看</el-button></router-link>

                      <span  v-else>暂无</span>
                  </template>
          </el-table-column>
          <!-- 只要有一个权限就显示列表 -->
          <el-table-column                           label="操作"          align="center"   width="290"  v-if='permit.prd_Lift || permit.prd_issue || permit.edit ||  permit.delete || permit.collect'>
                  <template v-slot="list">
                          <!-- 1.权限最外层包裹 角色设置而来 -->
                          <!-- 2.状态 前端控制过程-->
                          <!-- 3.操作 -->
                          <span  v-if='permit.prd_Lift'>
                              <el-button    type="primary"  size="small" round  plain  @click='product_lift(list.row,list.row.code,3,1)'  v-if='list.row.status == 1'>协议用印提审</el-button>
                              <el-button   type="primary"  size="small" round  plain  @click='product_lift(list.row, list.row.code,3,0)'  v-if='list.row.status == 3  ||  list.row.status == 8'   title='修改提审信息后可再次发起提审'>协议用印提审</el-button>
                          </span>
                          <span  v-if='permit.prd_issue'>
                              <el-button   type="primary"  size="small" round  plain  @click='product_lift(list.row, list.row.code,4,1)'  v-if='list.row.status == 4'>发行提审</el-button>
                              <el-button   type="primary"  size="small" round  plain  @click='product_lift(list.row, list.row.code,4,0)'  v-if='list.row.status == 6  ||  list.row.status == 9'  title='修改提审信息后可再次发起提审'>发行提审</el-button>
                          </span>
                          <!-- 立项提审后，未有人审批，撤回操作 -->
                          <el-button  v-if='((list.row.status == 2 && list.row.approvalStatus == 0) || (list.row.status == 5  &&  list.row.approvalStatus == 0))' type="primary"  size="small" round   @click='drawback(list.row.status,list.row.code)'  title='撤回后可修改提审信息'>撤回提审</el-button>
                           <!-- 审批中，所有人都不可以操作 -->
                          <span  v-if='((list.row.status == 2 && list.row.approvalStatus == 1) || (list.row.status == 5  &&  list.row.approvalStatus == 1))'>——</span>

                          <span  v-if='permit.edit  &&  !permit.edit_all'>
                              <router-link  v-if='list.row.status == 1   || list.row.status == 3 || list.row.status == 6 || list.row.status == 8|| list.row.status == 9'  :to='{path:"/product/edit",query:{code:list.row.code,state:"isEdit"}}' ><el-button  type="primary" size="mini" round >编辑</el-button></router-link>
                              <span  v-if='list.row.status == 7'>——</span>
                          </span>
                          <span  v-if='permit.edit_all'>
                              <router-link  v-if=' list.row.status == 4  ||  list.row.status == 7 || list.row.status == 1 || list.row.status == 3 || list.row.status == 6 || list.row.status == 8 || list.row.status == 9'  :to='{path:"/product/edit",query:{code:list.row.code,state:"isEdit"}}' ><el-button  type="primary" size="mini" round >编辑</el-button></router-link>
                          </span>
                          <!-- 删除 -->
                          <span  v-if='permit.delete'>
                              <el-button   v-if='list.row.status == 1  '   type="warning" size="mini" round  @click='delete_Product(list.row.code)'>删除</el-button>
                          </span>
                          <!-- 标记删除功能 -->
                          <el-button  v-if='list.row.status == 1  &&permit.badge_del  && list.row.delMark == 0' type="danger"  size="mini" round @click="delete_Product_badge(list.$index, list.row)">撤销</el-button>
                          <el-button  v-if='list.row.status == 1  &&permit.badge_del  && list.row.delMark == 1' type="danger" plain size="mini" round @click="cancelDelete_badge(list.$index, list.row)">取消删除</el-button>
                          <!-- 状态结束 -->
                          <span  v-if='list.row.status == 7'>
                                
                                <el-button  v-if='permit.collect' type="primary" size="mini"  round  @click='Collect(list.row.code,list.row.prjCode)'>募集信息</el-button>
                                
                                <!-- <span  v-else>——</span> -->
                          </span>

                  </template>
          </el-table-column>
    </el-table>
   <!-- 表头标题选择显示 -->
   <!-- <i class='icon icon-choose fl cursor'  title="表头选择" @click='changeTable()'></i> -->
    <!-- 分页 -->
    <el-pagination class='mt28'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.currentPage"
            :page-sizes="[10, 20]"
            :page-size="10"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Total">
    </el-pagination>
    <!-- //改变表头显示 暂废-->
    <tableName ref='pro_NameChange'></tableName>
    
    <!-- 列表操作 - 管理标的编辑 暂废-->
    <ManageBiao ref='manageBiao'></ManageBiao>
    <!-- //募集信息 -->
    <Collection ref='collection'></Collection>
</el-row>
</template>

<script >
//接口
  import  { ListProduct,del_Product,removeProduct_badge,removeCancel_badge,copyProduct }  from '@/api/professional_work/product/index'
  import  { getExaCode_product,drawback_lift }  from '@/api/examine/index'

//组件
import  tableName  from  '@/components/professional_work/product/tableName' //暂废
import  ManageBiao  from  '@/components/professional_work/product/ManageBiao'//暂废
//募集信息
import  Collection  from  '@/components/professional_work/product/Collection'



import { mapGetters } from 'vuex'
export default {
	name: 'product',
  inject:['reload'],
	data(){
		return {
      /*static*/
      //搜索区
      pro_type:[{value: '',label: '产品类型'}, 
                {value: '1',label: '收益权类'}, 
                {value: '2',label: '定向融资类'}, 
                {value: '3',label: '资产登记交易类'}, 
                {value: '4',label: '资产转让增值'},
                {value: '5',label: '其他类'}],
      contract:[
        {label:'电子合同',value:''},
        {label:'签署中',value:'1'},
        {label:'签署完成',value:'2'},
      ],
      pro_state:[{value: '',label: '产品状态'},
                      {value: '1',label: '已挂牌'},
                      {value: '2',label: '发行审批中'},
                      {value: '3',label: '已发行'},
                      {value: '4',label: '发行失败'},
                      {value: '5',label: '归档审批中'},
                      {value: '6',label: '已归档'},
                      {value: '7',label: '归档失败'},
      ],

      /*active*/
      /*当前用户允许权限*/
      permit:{
          check:false,//查看详情
          //增删改
          delete:false,
          add:false,
          edit:false,/*项目经理 编辑项目权限*/
          edit_all:false,/*所有不在审批状态 可编辑项目权限*/

          //提审 复制 查看历史
          prd_Lift:false,
          prd_issue:false,
          copy:false,
          history:false,
          collect:false,//募集信息
          export:false,
          check_all:false,
      },
      //表头展示与否
      tableName:{
		        name:true,
		        guimo:true,
		        pro_name:true,
		        rate:true,
		        type:true,
		        contract:true,
		        state:true,
				    feeState:false,
				    biaodi:false,
		        updateTime:true,
		        person:true,
		        shenpi:true,
		  },
      search:{
      		pro_type:'',
    			contract:'',
    			pro_state:'',
          limit:10,
          currentPage:1,
          name:this.Global.ie_nine == true ?'请输入产品名称/经办人':'',/*placeholder 兼容ie9 △*/
      },
      search_place_str:'请输入产品名称/经办人',//placeholder输入内容 placeholder 兼容ie9 △
      currentCheckedRow:'',//当前选中的row 记录
      
      tableList:[],
      Total:null,




      prjManagePemit:true,//当前是否是 “项目经理”
		}
	},
  created(){
      
      this.jurisdiction()//初始化按钮权限操作
      this.pageInit()
  },
	methods:{
    pageInit(num){
        let that =this,url;
        /*placeholder 兼容ie9 △*/
        if(this.search.name == this.search_place_str){
            this.search.name = ''
        }
        /*搜索列表 均将页数设置为1*/
        if(num == 1){
            this.search.currentPage = 1
        }
        if(this.permit.check_all){
          url='/op/product/get_all_product_list'
        }
        else{
          url='/op/product/get_product_list'
        }
        ListProduct(url,this.search).then(response => {
            if(response.data.flag == true){
                this.Total = response.data.totalRs
                this.tableList = response.data.dataList
                /*placeholder 兼容ie9 △*/
                if(this.search.name == ''){
                    this.search.name = this.Global.ie_nine == true ? this.search_place_str:''
                }
            }
        })
        .catch(error => {
            console.log(error)
        })
    },
    //初始化按钮权限操作
    jurisdiction(){
        //"查看产品详情"
        this.permit.check = this.button_limit.find(item => {
          return item.id ===  20202
        })
        /*新增*/
        this.permit.add = this.button_limit.find(item => {
          return item.id === 20203
        })
        /*编辑*/
        this.permit.edit = this.button_limit.find(item => {
          return item.id === 20204
        })
        /*删除*/
        this.permit.delete = this.button_limit.find(item => {
          return item.id === 20205
        })
        /*标记删除*/
        this.permit.badge_del = this.button_limit.find(item => {
          return item.id === 20219
        })

        /*项目提审*/
        this.permit.prd_Lift = this.button_limit.find(item => {
          return item.id === 20206
        })
        /*发行提审*/
        this.permit.prd_issue = this.button_limit.find(item => {
          return item.id === 20207 
        })
        /*复制*/
        this.permit.copy = this.button_limit.find(item => {
          return item.id === 20211
        })
        /*历史*/
        this.permit.history = this.button_limit.find(item => {
          return item.id === 20215
        })
        /*募集信息*/
        this.permit.collect = this.button_limit.find(item => {
          return item.id === 20216
        })

        /*编辑*/
        this.permit.edit_all = this.button_limit.find(item => {
          return item.id === 20217
        })
        /*导出*/
        this.permit.export = this.button_limit.find(item => {
          return item.id === 20218
        })
        /*导出*/
        this.permit.check_all = this.button_limit.find(item => {
          return item.id === 20220
        })

    },
    


    //提审
     product_lift(row,code,type,isFirst){
        let that = this
        let prjCode = row.prjCode
        let prdName = row.name
        if(isFirst == true){
            this.$router.push({path:'/product/lift',query:{prjCode,code,type,isFirst,prdName}})
        }
        else{ 
            //得到产品审批code
            getExaCode_product(code,type).then(res=>{
              if(res.data.flag == true){
                let itemcode = res.data.reqCode
                this.$router.push({path:'/product/lift',query:{type,isFirst:false,itemcode}})
              }
            })
        }
    },
    //撤回
    drawback(status,code){
        let url,type
        //立项撤回
        if(status == 2){
            url = '/op/product_agreement_stamp_req/roll_back_req'
            type = 3
        }
        if(status == 5){
          url = '/op/product_release_req/roll_back_req'
          type = 4
        }
        this.$confirm('确定撤回提审？撤回后可修改提审信息并再次发起提审', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
            getExaCode_product(code,type).then(res=>{
              if(res.data.flag == true){
                let itemcode = res.data.reqCode
                drawback_lift(url,itemcode).then(response=>{
                    if(response.data.flag == true){
                      this.$message({type:'success',message:response.data.msg})
                      this.pageInit()
                    }
                    if(response.data.flag == false){
                      this.$message({type:'error',message:'当前已在审批中，无法撤回'})
                    }
                })
              }
            })
        })
    },
    //复制产品
    copy(){
        if(this.currentCheckedRow == ''){
            this.$message({type:'warning',message:'请选择一个产品！'})
          }
          else{
            let code = this.currentCheckedRow.code
            // console.log(this.currentCheckedRow)
            copyProduct(code).then(res=>{
                if(res.data.flag == true){
                    this.$message({type:'success',message:res.data.msg})
                    this.$refs.multipleTable.toggleRowSelection(this.currentCheckedRow,false);
                    this.currentCheckedRow = ''
                    this.pageInit(1)
                    
                }
            })
          }    
    },
    delete_Product(code){
        let that=this;
        this.$confirm('确定删除该条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          del_Product(code)
            .then(response => {
              this.$message({type:'success',message:response.data.msg})
              this.pageInit()
            })
            .catch(error => {
              that.outputError(error)
            })
        })
        .catch(() => {})
    },
    //标记删除
    delete_Product_badge(index,row){
        let that=this;
        this.$confirm('标记撤销后，需管理员确认才能删除。期间，您也可取消撤销', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(async () => {
              await removeProduct_badge(row.code)
                .then(res => {
                    if(res.data.flag == true){
                        this.$message({type:'success',message:res.data.msg})
                        this.pageInit()
                    }
                })
                .catch(error => {
                  that.outputError(error)
                })
          })
          .catch(() => {})
    },
    cancelDelete_badge(index,row){
        let that=this;
        this.$confirm('确定取消删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(async () => {
              await removeCancel_badge(row.code)
                .then(res => {
                    if(res.data.flag == true){
                        this.$message({type:'success',message:res.data.msg})
                        this.pageInit()
                    }
                })
                .catch(error => {
                  that.outputError(error)
                })
          })
          .catch(() => {})
    },

    //项目经理填写募集信息
    Collect(code,prjCode){
        this.$refs.collection.$emit('openDialog',code,prjCode)
    },

		//改变表头显示
    changeTable(){
        this.$refs.pro_NameChange.$emit('openDialog',this.tableName)
    },

    /*placeholder 兼容ie9 focus-blur △*/
    focusinput(e,str){
        if(this.Global.ie_nine == true){
            this.search.name = this.search.name == this.search_place_str ? '':this.search.name
        }
    },
    blurinput(e,str){
        if(this.Global.ie_nine == true){
            let val = e.srcElement.value//ie9下只能用这个值
            this.search.name = val == '' ? this.search_place_str:val
        }
    },
    //点击列  跳转
    checkUser(row, column, cell, event){
        // console.log(row, column, cell, event)
        // if(column.label == '电子合同'){
        //     this.$router.push({name:'product_ContractList',params:{row}})
        // }
        if(column.label == '产品名称'  &&  this.permit.check){
            this.$router.push({path:'/product/detail',query:{code:row.code}})
        }
    },
    //列 单选操作
    changeSelect(val,row){
      console.log(val,row)
      //是否选中
      if(val == true){
          //当前选中值 是否有值
          if(this.currentCheckedRow != ''){
              this.currentCheckedRow.checked = false
              this.currentCheckedRow = ''
          }
          this.currentCheckedRow = row
      }
      else{
          this.currentCheckedRow.checked = false
          this.currentCheckedRow = ''
      }
    },
    handleSelectionChange(val,row){
      
      //没有任何选中状态
      if(this.currentCheckedRow == ''){
          this.$refs.multipleTable.toggleRowSelection(row,true);
          this.currentCheckedRow = row
      }
      //当前已有选中状态
      else{
        //将已选中的取消
        if(this.currentCheckedRow == row){
          this.$refs.multipleTable.toggleRowSelection(row,false);
          this.currentCheckedRow = ''
        }
        //换一条选中，并取消前一条选中
        else{
          
          this.$refs.multipleTable.toggleRowSelection(this.currentCheckedRow,false);
          this.currentCheckedRow = row
        }
      }
    },
    hover({row, column, rowIndex, columnIndex}){
    // console.log(row, column, rowIndex, columnIndex)
    //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置   
      // if(columnIndex == 1 ){  //这里不能用index来判断，因为表头会动态改变
      //   return 'activeCol'
      // }
      if(column.label == '产品名称' && this.permit.check){
            return 'activeCol'
      }
    },
   

      //导出
    handleExport(){

    },
    //列表操作 - 管理标的
    Product_mana(index,row){
      this.$refs.manageBiao.$emit('openDialog',row)
    },
    //
    /*每页显示条数变化 事件触发
     *@method 方法名
     *@for 所属类名
     *@param{val} 共几条
     *@return {} 
    */
    handleSizeChange(val) {
      this.search.limit = val;
      /*页数改变，scrolltop*/
      document.querySelector('.el-main').scrollTop = 0
      this.pageInit()
    },
    /*页数变化 事件触发
     *@method 方法名
     *@for 所属类名
     *@param{val} 第几页
     *@return {} 
    */
    handleCurrentChange(val) {
      this.search.currentPage = val
      /*页数改变，scrolltop*/
      document.querySelector('.el-main').scrollTop = 0
      // console.log(this.$route)
      // this.$route.meta.savedPosition = 0 不用原因 改变路由信息上的这个值，页面本身并不会变化，因为这个操作在这个路由下进行，不会触发路由拦截
      this.pageInit()
    },
	},
	components:{
		tableName,
    ManageBiao,
    Collection
	},
  computed:{
    ...mapGetters(['button_limit','roleNames'])
  },
}
</script>

<style type="text/css" scoped>
.icon{display: inline-block;width: 32px;height: 32px;}
.icon-choose{background: url('../../assets/images/img/option/icon-choose.png') no-repeat;}

</style>